<script setup lang="ts">
import { inject, onMounted, reactive, ref, watch } from 'vue';

import { cloneDeep } from '@vben/utils';

import { StorageManager } from '@vben-core/shared/cache';

import {
  ElCol,
  ElCollapse,
  ElCollapseItem,
  ElMessage,
  ElOption,
  ElRadio,
  ElRadioGroup,
  ElRow,
  ElSelect,
  ElSlider,
} from 'element-plus';

import { rasterServiceApi } from '#/api';
import { usePublicStore } from '#/store';

const storageManager = new StorageManager({
  prefix: '',
  storageType: 'sessionStorage',
});

const publicStore = usePublicStore();
const currentLayer = inject('currentSelectedLayer') as any;
const activeNames = ref(['layerSelect', 'imageEnhancement']);
const bands = ref<Array<number>>([1]); // 波段列表
let lastBands = [] as any;
const loadingOptions = ref(false);

const multiBandRasterOptions = reactive({
  layer: currentLayer.value,
  bandList: [] as any,
  layout: {
    visibility: 'visible',
  },
  paint: {
    'raster-opacity': 100, // 最后需要转到0-1
    'raster-saturation': 0, // 最后需要转到0-1
    'raster-contrast': 0, // 最后需要转到0-1
    'raster-resampling': 'linear',
  },
}) as any;

const renderParamsReturn = () => {
  // 此处需要深拷贝，否则会使multiBandRasterOptions的对象参数与currentLayer.value的对象参数挂钩，导致互相影响
  const renderParams = cloneDeep(currentLayer.value.renderParams);
  Object.keys(renderParams).forEach((key) => {
    multiBandRasterOptions[key] = renderParams[key];
  });
};

// 请求当前图层波段
const requestBands = async () => {
  loadingOptions.value = true;
  const res = await rasterServiceApi.getBandCount(
    storageManager.getItem<string>('userId') as string,
    currentLayer.value.source,
  );
  for (let i = 2; i <= res; i++) {
    bands.value.push(i);
  }
  loadingOptions.value = false;
};
const hasDuplicateElements = (arr: any) => {
  const set = new Set();
  for (const element of arr) {
    if (set.has(element)) {
      return true; // 如果在 Set 中已经存在，则说明有重复元素
    }
    set.add(element); // 否则将元素添加到 Set 中
  }
  return false; // 遍历完数组后仍未发现重复元素，返回 false
};
const handleBandChange = (_val: any) => {
  if (hasDuplicateElements(multiBandRasterOptions.bandList)) {
    ElMessage.warning('请勿选择重复波段');
    multiBandRasterOptions.bandList = cloneDeep(lastBands); // 数组直接赋值会浅浅拷贝
  } else {
    lastBands = cloneDeep(multiBandRasterOptions.bandList);
  }
};

watch(
  multiBandRasterOptions,
  () => {
    publicStore.setRenderOptions(multiBandRasterOptions);
  },
  {
    deep: true,
  },
);

onMounted(() => {
  if (currentLayer.value.renderType[1] === 'multiBandRasterRender') {
    renderParamsReturn();
  }
  requestBands();
  publicStore.setRenderOptions(multiBandRasterOptions);
  lastBands = cloneDeep(multiBandRasterOptions.bandList);
});
</script>

<template>
  <div class="all">
    <ElRow class="itemRow">
      <ElCol :span="24">
        <ElCollapse v-model="activeNames">
          <ElCollapseItem title="波段选择" name="layerSelect">
            <ElRow class="itemRow" style="padding-bottom: 10px">
              <ElCol :span="4">
                <span class="label-style"> 红光通道： </span>
              </ElCol>
              <ElCol :span="20">
                <ElSelect
                  size="small"
                  v-model="multiBandRasterOptions.bandList[0]"
                  placeholder="请选择波段"
                  clearable
                  style="width: 100%"
                  @change="handleBandChange"
                  :loading="loadingOptions"
                  loading-text="加载中..."
                >
                  <ElOption
                    v-for="item in bands"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </ElSelect>
              </ElCol>
            </ElRow>
            <ElRow class="itemRow" style="padding-bottom: 10px">
              <ElCol :span="4">
                <span class="label-style"> 绿光通道： </span>
              </ElCol>
              <ElCol :span="20">
                <ElSelect
                  size="small"
                  v-model="multiBandRasterOptions.bandList[1]"
                  placeholder="请选择波段"
                  clearable
                  style="width: 100%"
                  @change="handleBandChange"
                  :loading="loadingOptions"
                  loading-text="加载中..."
                >
                  <ElOption
                    v-for="item in bands"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </ElSelect>
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="4">
                <span class="label-style"> 蓝光通道： </span>
              </ElCol>
              <ElCol :span="20">
                <ElSelect
                  size="small"
                  v-model="multiBandRasterOptions.bandList[2]"
                  placeholder="请选择波段"
                  clearable
                  style="width: 100%"
                  @change="handleBandChange"
                  :loading="loadingOptions"
                  loading-text="加载中..."
                >
                  <ElOption
                    v-for="item in bands"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </ElSelect>
              </ElCol>
            </ElRow>
          </ElCollapseItem>
          <ElCollapseItem title="渲染参数" name="renderParams">
            <ElRow class="itemRow">
              <ElCol :span="6">
                <span class="label-style"> 不透明度： </span>
              </ElCol>
              <ElCol :span="18">
                <ElSlider
                  v-model.number="
                    multiBandRasterOptions.paint['raster-opacity']
                  "
                  show-input
                  size="small"
                />
              </ElCol>
            </ElRow>
          </ElCollapseItem>
          <ElCollapseItem title="影像增强" name="imageEnhancement">
            <ElRow class="itemRow">
              <ElCol :span="4">
                <span class="label-style"> 采样方式： </span>
              </ElCol>
              <ElCol :span="20">
                <ElRadioGroup
                  v-model="multiBandRasterOptions.paint['raster-resampling']"
                  size="small"
                >
                  <ElRadio label="linear" style="padding-bottom: 5px">
                    线性
                  </ElRadio>
                  <ElRadio label="nearest" style="padding-bottom: 5px">
                    最近邻
                  </ElRadio>
                </ElRadioGroup>
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="6">
                <span class="label-style"> 饱和度： </span>
              </ElCol>
              <ElCol :span="18">
                <ElSlider
                  v-model.number="
                    multiBandRasterOptions.paint['raster-saturation']
                  "
                  show-input
                  :min="-100"
                  size="small"
                />
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="6">
                <span class="label-style"> 对比度： </span>
              </ElCol>
              <ElCol :span="18">
                <ElSlider
                  v-model.number="
                    multiBandRasterOptions.paint['raster-contrast']
                  "
                  show-input
                  :min="-100"
                  size="small"
                />
              </ElCol>
            </ElRow>
          </ElCollapseItem>
        </ElCollapse>
      </ElCol>
    </ElRow>
  </div>
</template>

<style scoped>
.all {
  width: 100%;
}

.itemRow {
  width: 100%;
  padding: 5px;
}

.preview {
  height: 170px;
}

.el-input {
  width: 100%;
}

.label-style {
  font-size: 15px;
}

.colorInput {
  caret-color: transparent;
}

:deep(.colorInput .el-input__inner:hover) {
  cursor: pointer;
}

:deep(.el-table .el-table__cell) {
  text-align: center;
}

:deep(.el-table:not(.el-table--border) .el-table__cell) {
  border: none;

  /* 去除表格边框 */
}

:deep(.el-table--small .cell) {
  height: 25px;
  padding: 0 4px;
}

:deep(.el-collapse-item__header) {
  font-size: 15px;
  font-weight: 600;
}
</style>
